import { Button, Form, FormInstance, Input, Popover, Steps } from 'antd';
import React, { useRef, useState } from 'react';
import { getVCodeByPhone } from '../../api/threeApi';

let CodeTimer: any = null;

export default function ChangePhone(props: { form: FormInstance }) {
	const [currentStep, setCurrentStep] = useState(0);

	const [codeTime, _setCodeTime] = useState(60);
	const codeTimeRef = useRef(codeTime);
	const setCodeTime = (data: number): void => {
		codeTimeRef.current = data;
		_setCodeTime(data);
	};

	const handleGetVCode = (form: FormInstance) => {
		form.validateFields(['phone']).then((values) => {
			CodeTimer = setInterval(() => {
				setCodeTime(codeTimeRef.current - 1);
				if (codeTimeRef.current === 0) {
					clearInterval(CodeTimer);
					setCodeTime(60);
				}
			}, 1000);
			getVCodeByPhone(values.phone, 'reset_password').then((res) => {
				console.log(res);
			});
		});
	};

	const customDot = (dot: any, { status, index }: any) => <div className="step-item-custom">{index + 1}</div>;

	return (
		<div className="custom-modal">
			<div className="ta-c bor-b b-side ptb12 strong c-hint-b fs18">更换号码</div>

			<div className="p32">
				<div className="pb36">
					<Steps current={currentStep} progressDot={customDot}>
						<Steps.Step title="验证原手机号" />
						<Steps.Step title="设置新手机号" />
						<Steps.Step title="完成" />
					</Steps>
				</div>

				<Form.Item name="phone" rules={[{ required: true, message: '请输入手机号' }]} style={{ width: '100%' }}>
					<Input placeholder="手机号" />
				</Form.Item>

				<div className="d-f jc-b">
					<Form.Item
						name="vcode"
						rules={[{ required: true, message: '请输入验证码' }]}
						style={{ width: '100%' }}
					>
						<Input placeholder="输入验证码" />
					</Form.Item>
					<Form.Item className="ml8">
						<Button
							block
							type="primary"
							onClick={() => handleGetVCode(props.form)}
							disabled={codeTimeRef.current < 60}
							style={{ width: 112 }}
						>
							{codeTimeRef.current < 60 ? codeTimeRef.current : '获取验证码'}
						</Button>
					</Form.Item>
				</div>

				<div className="ta-c">
					{currentStep !== 2 ? (
						<Button
							type="primary"
							className="w168"
							onClick={() => {
								setCurrentStep(currentStep + 1);
							}}
						>
							下一步
						</Button>
					) : (
						<Button type="primary" htmlType="submit" className="w168">
							提交
						</Button>
					)}
				</div>
			</div>
		</div>
	);
}
